<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>抽奖</title>
		<meta charset="utf-8">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style>
			.g-content {
				width: 100%;
				background: #fbe3cc;
				height: auto;
				font-family: "微软雅黑", "microsoft yahei";
			}
			.g-content .g-lottery-case {
				width: 500px;
				height: 445px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.g-content .g-lottery-case .g-left h2 {
				font-size: 20px;
				line-height: 32px;
				font-weight: normal;
				margin-left: 20px;
			}
			
			.g-content .g-lottery-case .g-left {
				width: 450px;
				float: left;
			}
			
			.g-lottery-box {
				width: 400px;
				height: 400px;
				margin-left: 30px;
				position: relative;
				background: url(img/lottery/ly-plate-c.gif) no-repeat;
			}
			
			.g-lottery-box .g-lottery-img {
				width: 340px;
				height: 340px;
				position: relative;
				background: url(img/lottery/bg-lottery.png) no-repeat;
				left: 30px;
				top: 30px;
			}
			
			.g-lottery-box .playbtn {
				width: 186px;
				height: 186px;
				position: absolute;
				top: 77px;
				left: 77px;
				background: url(img/lottery/playbtn.png) no-repeat;
			}
		</style>
	</head>

	<body>
		<div class="g-content">
			<div class="g-lottery-case">
				<div class="g-left">
					<h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
					<div class="g-lottery-box">
						<div class="g-lottery-img">
							<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
		<script>
			$(function() {
				var $btn = $('.playbtn');
				var playnum = 1; //初始次数，由后台传入
				$('.playnum').html(playnum);
				var isture = 0;
				var clickfunc = function() {
					var data = [1, 2, 3, 4, 5, 6];
					//data为随机出来的结果，根据概率后的结果
					data = data[Math.floor(Math.random() * data.length)];
					switch(data) {
						case 1:
							rotateFunc(1, 0, '恭喜您获得2000元理财金!');
							break;
						case 2:
							rotateFunc(2, 60, '谢谢参与~再来一次吧~');
							break;
						case 3:
							rotateFunc(3, 120, '恭喜您获得5200元理财金!');
							break;
						case 4:
							rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
							break;
						case 5:
							rotateFunc(5, 240, '谢谢参与~再来一次吧~');
							break;
						case 6:
							rotateFunc(6, 300, '恭喜您获得1000元理财金!');
							break;
					}
				}
				$btn.click(function() {
					if(isture) return; // 如果在执行就退出
					isture = true; // 标志为 在执行
					//先判断是否登录,未登录则执行下面的函数
					if(1 == 2) {
						$('.playnum').html('0');
						alert("请先登录");
						isture = false;
					} else { //登录了就执行下面
						if(playnum <= 0) { //当抽奖次数为0的时候执行
							alert("没有次数了");
							$('.playnum').html(0);
							isture = false;
						} else { //还有次数就执行
							playnum = playnum - 1; //执行转盘了则次数减1
							if(playnum <= 0) {
								playnum = 0;
							}
							$('.playnum').html(playnum);
							clickfunc();
						}
					}
				});
				var rotateFunc = function(awards, angle, text) {
					isture = true;
					$btn.stopRotate();
					$btn.rotate({
						angle: 0,
						duration: 4000, //旋转时间
						animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
						callback: function() {
							isture = false; // 标志为 执行完毕
							alert(text);
						}
					});
				};
			});
		</script>
	</body>

</html>